import React from 'react';
import { Card, CardContent, Typography, LinearProgress, Button, Box, Chip } from '@mui/material';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

export default function ActivityCard({ activity, onCheckin }) {
  const formatDate = (date) => {
    return format(new Date(date), 'yyyy年MM月dd日', { locale: zhCN });
  };

  return (
    <Card sx={{ mb: 2 }}>
      <CardContent>
        <Typography variant="h6" gutterBottom>
          {activity.title}
        </Typography>
        
        <Typography variant="body2" color="text.secondary" paragraph>
          {activity.description}
        </Typography>

        <Box sx={{ mt: 2, mb: 1 }}>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
            <Typography variant="body2" color="text.secondary">
              进度: {Math.round(activity.progress)}%
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {activity.checkins?.length || 0}/{activity.checkInRequired} 次打卡
            </Typography>
          </Box>
          <LinearProgress 
            variant="determinate" 
            value={activity.progress} 
            sx={{ height: 8, borderRadius: 4 }}
          />
        </Box>

        <Box sx={{ mt: 2, display: 'flex', gap: 1, flexWrap: 'wrap' }}>
          <Chip 
            size="small"
            label={activity.status}
            color={activity.status === '已完成' ? 'success' : 'default'}
          />
          <Chip 
            size="small"
            label={`剩余 ${activity.remainingDays} 天`}
            color="primary"
          />
          <Chip 
            size="small"
            label={`参与时间：${formatDate(activity.joinedAt)}`}
            variant="outlined"
          />
        </Box>

        {activity.status === '进行中' && (
          <Button
            variant="contained"
            fullWidth
            sx={{ mt: 2 }}
            onClick={() => onCheckin(activity)}
          >
            打卡
          </Button>
        )}
      </CardContent>
    </Card>
  );
} 